<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="main-header">
        <p>编辑推广计划名称</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="top" class="rule-form">
        <el-form-item label="支付方式" class="rule-form-top">
          <el-select v-model="form.type">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <div class="rule-form-bottom flex-between">
          <el-form-item>
            <el-select v-model="form.currency">
              <el-option v-for="(item, index) in currencyList" :key="index" :label="item.label"
                :value="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="amount">
            <el-input v-model="form.amount" type="number"></el-input>
          </el-form-item>
        </div>
        <div class="btns flex">
          <p class="font-14 pointer" @click="submitForm(ruleFormRef)">确定</p>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, ref } from 'vue';

const emit = defineEmits(['close']);

const rules = {
  amount: [
    { type: true, message: '请选择支付方式', trigger: 'blur' },
    { currency: true, message: '请选择货币', trigger: 'blur' },
    { required: true, message: '请输入金额', trigger: 'blur' },
  ]
};

const typeList = [
  {
    label: '货币',
    value: 1
  },
  {
    label: '实物',
    value: 2
  }
];
const currencyList = [
  {
    label: '美元'
  },
  {
    label: '欧元'
  },
  {
    label: '英镑'
  },
  {
    label: '日元'
  },
  {
    label: '人民币'
  },
  {
    label: '加拿大元'
  },
  {
    label: '澳大利亚元'
  },
  {
    label: '瑞士法郎'
  },
  {
    label: '新西兰元'
  },
  {
    label: '韩元'
  },
  {
    label: '泰国铢'
  },
  {
    label: '印度卢比'
  },
  {
    label: '巴西雷亚尔'
  },
  {
    label: '南非兰特'
  },
  {
    label: '西班牙比塞塔'
  },
  {
    label: '瑞典克朗'
  },
  {
    label: '新加坡元'
  },
  {
    label: '阿联酋迪拉姆'
  },
  {
    label: '墨西哥比索'
  },
  {
    label: '俄罗斯卢布'
  }
];

const form = ref({
  type: 1,
  currency: '美元',
  amount: null
});
const ruleFormRef = ref();

const close = () => {
  emit('close', null);
}
const submitForm = async formEl => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      emit('close', {
        name: form.value.name,
        desc: form.value.desc
      });
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: relative;
    width: 390px;
    border-radius: 10px;
    background: #fff;

    .rule-form {
      padding: 16px 24px;

      &::v-deep {
        .el-form-item__content {
          margin-bottom: 18px;
        }

        input {
          height: 32px;
        }
      }

      .rule-form-top {
        &::v-deep {
          .el-select {
            width: 100%;
          }
        }
      }

      .rule-form-bottom {
        &::v-deep {
          .el-form-item {
            &:first-child {
              width: 140px;
            }

            &:last-child {
              width: 186px;
            }

            .el-form-item__content {
              margin-bottom: 0;
            }
          }
        }
      }

      .btns {
        margin-top: 25px;
        justify-content: end;

        p {
          transition: .1s;
          padding: 10px 20px;
          border-radius: 4px;
          color: #fff;
          background-color: #ff5277;
          border-color: #ff5277;
        }
      }
    }
  }
}
</style>
